<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('学生做实验页面')" />
    <th:block th:include="include :: summernote-css"/>
</head>
<script>
   /* function report() {
        $("#caozuo").attr("hidden", true)
        $("#report").attr("hidden", false)
    }

    function basicInformation() {
        $("#caozuo").attr("hidden", false)
        $("#report").attr("hidden", true)
    }*/
</script>
<body class="gray-bg">
<div class="container">
    <input id="experimentTeaId" th:value="${lookExperiment.experimentTeaId}" hidden="hidden"/>
    <br>
    <br>
    <!--<div class="col-xs-12">
        <div class="col-xs-4"></div>
        <div class="col-xs-3">
            <span class="fa fa-bars" style="font-size: 80px;" onclick="basicInformation()"></span>
            <br>
            <span style="font-size: 20px" onclick="basicInformation()">虚拟实验操作</span>
        </div>
        <div class="col-xs-3">
            <span class="fa fa-file-word-o" style="font-size: 80px;" onclick="report()"></span>
            <br>
            <span style="font-size: 20px" onclick="report()">实验报告</span>
        </div>
        <div class="col-xs-2"></div>
    </div>-->
</div>
<div class="container">
    <div class="row" style="padding: 0px 100px 20px 100px;" id="caozuo">
        <div class="col-md-12" style="text-align: center;">
            <h2>实验名称</h2>
            <p th:text="${lookExperiment.experimentTeaName}" style="font-size: 20px"></p>
        </div>
        <div class="col-md-12" style="height: 30px"></div>
        <div class="col-md-12">
            <div style="text-align: center">
                <h3>实验说明</h3>
            </div>
            <div class="row" style="border: 1px solid gainsboro;  box-shadow: 0px 0px 4px gainsboro; border-radius:20px ;background-color: white ">
                <div id="message"></div>
            </div>
        </div>
        <input type="text" id="onlineExperimentIntroduce" th:value="${lookExperiment.onlineExperimentIntroduce}" hidden="hidden"/>
    </div>
    <div class="row" style="height: 800px">
        <div class="col-sm-12">
            <div>
                <div style="text-align: center">
                    <h3>虚拟实验操作         <button onclick="clisk()" class="btn-primary">全屏</button></h3>
                </div>
                <iframe style='position: absolute;transform:scale(0.6);left: -370px;top: -170px;' th:src="${lookExperiment.onlineExperimentUrl+'?token='+token}" width='1920px' height='1080px' allowfullscreen='true' webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true"
                            msallowfullscreen="true" id="iframes"></iframe>
            </div>
        </div>
    </div>
    <div class="row" id="report">
        <div class="container">
            <div class="col-md-12" style="text-align: center;">
                <h3>实验报告</h3>
            </div>
        </div>
        <div class="row" style="padding: 0px 100px 20px 100px;">
            <input type="text" th:value="${lookExperiment.onlineExperimentReport}" id="onlineExperimentReport" hidden="hidden"/>
            <div class="col-md-12">
                <div class="summernote2">

                </div>
            </div>
        </div>
        <div style="text-align: center;">
            <button type="button" style="width: 100px" class="btn btn-success form-group" onclick="submitScore()">提交</button>
        </div>
    </div>
</div>
<div class="container">
<!--    <div class="row" id="report">-->
<!--        <div class="container">-->
<!--            <div class="col-md-12" style="text-align: center;">-->
<!--                <h3>实验报告</h3>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="row" style="padding: 0px 100px 20px 100px;">-->
<!--            <input type="text" th:value="${lookExperiment.onlineExperimentReport}" id="onlineExperimentReport" hidden="hidden"/>-->
<!--            <div class="col-md-12">-->
<!--                <div class="summernote2">-->

<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div style="text-align: center;">-->
<!--            <button type="button" style="width: 100px" class="btn btn-success form-group" onclick="submitScore()">提交</button>-->
<!--        </div>-->
<!--    </div>-->
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: summernote-js" />
</body>
<script>
    $(function () {
       /* $('.summernote1').summernote({
            placeholder: '请输入实验介绍',
            height : 500,
            lang : 'zh-CN',
            followingToolbar: false,
            disabled: true
        });*/
        /*$(".summernote1").summernote('code',$("#onlineExperimentIntroduce").val());
        $('.summernote1').summernote('disable');*/

        $("#message").html($("#onlineExperimentIntroduce").val())

        $('.summernote2').summernote({
            placeholder: '请输入实验报告',
            height : 500,
            lang : 'zh-CN',
            followingToolbar: false,
            callbacks: {
                onImageUpload: function(files, editor, $editable) {
                    var formData = new FormData();
                    formData.append("file", files[0]);
                    $.ajax({
                        type: "POST",
                        url: ctx + "common/upload",
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        dataType: 'json',
                        success: function(result) {
                            if (result.code == web_status.SUCCESS) {
                                //alert(result.url+","+result.fileName)
                                $('.summernote2').summernote('editor.insertImage', result.url, result.fileName);
                            } else {
                                $.modal.alertError(result.msg);
                            }
                        },
                        error: function(error) {
                            $.modal.alertWarning("图片上传失败。");
                        }
                    });
                }
            }
        });
        $(".summernote2").summernote('code',$("#onlineExperimentReport").val());
    })

    /**
     * 提交实验结果
     */
    function submitScore() {
        var value=$("#onlineExperimentId").val();
        $.ajax({
            url : ctx + '/system/OnlineExperimentStu/submitScore',
            type : 'post',
            data : JSON.stringify({experimentTeaId: $("#experimentTeaId").val(), experimentReport: $(".summernote2").summernote("code")}),
            dataType : 'json',
            contentType : 'application/json;charset=UTF-8',
            success :function (data) {
                if(data.code==500){
                    $.modal.msgError(data.msg)
                }
                if(data.code==0){
                    $.modal.msgSuccess(data.msg)
                    var int=self.setInterval(function(){  // 这个方法是说在延迟两秒后执行大括号里的方法
                        $.modal.reload();
                    },1000) //这里2000代表两秒
                }
            }
        })
    }


    /*u3d实验全屏显示*/
    function clisk() {

        var docElm=document.getElementById("iframes")
        //var docElm = document.documentElement;

//W3C

        if (docElm.requestFullscreen) {

            docElm.requestFullscreen();

        }

//FireFox

        else if (docElm.mozRequestFullScreen) {

            docElm.mozRequestFullScreen();

        }

//Chrome等

        else if (docElm.webkitRequestFullScreen) {

            docElm.webkitRequestFullScreen();

        }

//IE11

        else if (docElm.msRequestFullscreen) {

            docElm.msRequestFullscreen();

        }
    }

</script>
</html>